<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script>
    var gaProperty = 'UA-2577926-1';
    // Disable tracking if the opt-out cookie exists.
    var disableStr = 'ga-disable-' + gaProperty;
    if (document.cookie.indexOf(disableStr + '=true') > -1) {
      window[disableStr] = true;
    }
    function gaOptout() {
      document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = true;
    }
    function gaOptoutRevoke() {
      document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = false;
    }
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
    </script>
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
    <script>
    window.addEventListener("load", function() {
      window.cookieconsent.initialise({
        'palette': {
          'popup': {
            'background': '#eaf7f7',
            'text': '#5c7291'
          },
          'button': {
            'background': '#56cbdb',
            'text': '#ffffff'
          }
        },
        'theme': 'edgeless',
        'type': 'opt-out',
        'onInitialise': function (status) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onStatusChange': function(status, chosenBefore) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onRevokeChoice': function() {
          gaOptoutRevoke()
        }
      })
    });
    </script>
    <title>OpenLayers v6.13.0 API - Class: Style</title>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/bootstrap.bundle.min.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="styles/jaguar.css">
    <link type="text/css" rel="stylesheet" href="styles/site.css">
  </head>
  <body>
    <div class="container-fluid">
      <header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation">
        <a class="navbar-brand" href="https://openlayers.org/"><img src="logo-70x70.png" alt="">&nbsp;OpenLayers</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- menu items that get hidden below 768px width -->
        <nav class="collapse navbar-collapse" id="olmenu">
          <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="docdropdown">
              <a class="dropdown-item" href="/en/latest/doc/">Docs</a>
              <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
                <a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
                <a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
            </div>
          </li>
          <li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
          <li class="nav-item active"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="codedropdown">
              <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
            </div>
           </li>
          </ul>
        </nav>
      </header>
      <div id="wrap" class="row">
        <div class="navigation col-md-4 col-lg-3">
          <div class="search-wrapper">
            <div class="search">
              <input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
            </div>
          </div>
          <div class="navigation-list-wrapper">
            <ul class="navigation-list search-empty">
<li class="item item-class toggle-manual toggle-manual-show" data-longname="module:ol/style/Style~Style" data-name="ol/style/style">
    <span class="title toggle">
        <span class="fa fa-chevron-right mr-2 mt-1"></span>
        <span><a href="module-ol_style_Style-Style.html">ol​/style​/Style</a></span>
    </span>
    <div class="member-list" data-type="methods">
        <span class="subtitle">Methods</span>
        <ul>
            <li data-name="clone"><a href="module-ol_style_Style-Style.html#clone">clone</a>
            <li data-name="getfill"><a href="module-ol_style_Style-Style.html#getFill">getFill</a>
            <li data-name="getgeometry"><a href="module-ol_style_Style-Style.html#getGeometry">getGeometry</a>
            <li data-name="getgeometryfunction"><a href="module-ol_style_Style-Style.html#getGeometryFunction">getGeometryFunction</a>
            <li data-name="gethitdetectionrenderer"><a href="module-ol_style_Style-Style.html#getHitDetectionRenderer">getHitDetectionRenderer</a>
            <li data-name="getimage"><a href="module-ol_style_Style-Style.html#getImage">getImage</a>
            <li data-name="getrenderer"><a href="module-ol_style_Style-Style.html#getRenderer">getRenderer</a>
            <li data-name="getstroke"><a href="module-ol_style_Style-Style.html#getStroke">getStroke</a>
            <li data-name="gettext"><a href="module-ol_style_Style-Style.html#getText">getText</a>
            <li data-name="getzindex"><a href="module-ol_style_Style-Style.html#getZIndex">getZIndex</a>
            <li data-name="setfill"><a href="module-ol_style_Style-Style.html#setFill">setFill</a>
            <li data-name="setgeometry"><a href="module-ol_style_Style-Style.html#setGeometry">setGeometry</a>
            <li data-name="sethitdetectionrenderer"><a href="module-ol_style_Style-Style.html#setHitDetectionRenderer">setHitDetectionRenderer</a>
            <li data-name="setimage"><a href="module-ol_style_Style-Style.html#setImage">setImage</a>
            <li data-name="setrenderer"><a href="module-ol_style_Style-Style.html#setRenderer">setRenderer</a>
            <li data-name="setstroke"><a href="module-ol_style_Style-Style.html#setStroke">setStroke</a>
            <li data-name="settext"><a href="module-ol_style_Style-Style.html#setText">setText</a>
            <li data-name="setzindex"><a href="module-ol_style_Style-Style.html#setZIndex">setZIndex</a>
        </ul>
    </div>
              <li class="loading">Loading …
            </ul>
          </div>
        </div>

        <div class="main col-md-8 col-lg-9">
            <h1 class="page-title" data-filename="module-ol_style_Style-Style.html">Class: Style</h1>
            <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
              <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              This documentation is for OpenLayers v<span id="package-version">6.13.0</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
            </div>
            



<section class="content">

<header>
    <h2 class="my-3">
        <span class="ancestors"><a href="module-ol_style_Style.html">ol/style/Style</a>~</span>Style
    </h2>
    <br>
    
      
      
        <pre class="prettyprint source"><code>import Style from '<a href="module-ol_style_Style.html">ol/style/Style</a>';</code></pre>
      
    
    <div class="row p-3 ">
      <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
        <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg" id="_carbonads_js"></script>
      </div>
    
      <div class="class-description col-lg-7 align-self-center pl-0"><p>Container for vector feature rendering styles. Any changes made to the style
or its children through <code>set*()</code> methods will not take effect until the
feature or layer that uses the style is re-rendered.</p>
<h2 id="feature-styles">Feature styles</h2>
<p>If no style is defined, the following default style is used:</p>
<pre class="prettyprint source lang-js"><code> import {Circle, Fill, Stroke, Style} from 'ol/style';

 const fill = new Fill({
   color: 'rgba(255,255,255,0.4)',
 });
 const stroke = new Stroke({
   color: '#3399CC',
   width: 1.25,
 });
 const styles = [
   new Style({
     image: new Circle({
       fill: fill,
       stroke: stroke,
       radius: 5,
     }),
     fill: fill,
     stroke: stroke,
   }),
 ];</code></pre><p>A separate editing style has the following defaults:</p>
<pre class="prettyprint source lang-js"><code> import GeometryType from 'ol/geom/GeometryType';
 import {Circle, Fill, Stroke, Style} from 'ol/style';

 const styles = {};
 const white = [255, 255, 255, 1];
 const blue = [0, 153, 255, 1];
 const width = 3;
 styles[GeometryType.POLYGON] = [
   new Style({
     fill: new Fill({
       color: [255, 255, 255, 0.5],
     }),
   }),
 ];
 styles[GeometryType.MULTI_POLYGON] = styles[GeometryType.POLYGON];

 styles[GeometryType.LINE_STRING] = [
   new Style({
     stroke: new Stroke({
       color: white,
       width: width + 2,
     }),
   }),
   new Style({
     stroke: new Stroke({
       color: blue,
       width: width,
     }),
   }),
 ];
 styles[GeometryType.MULTI_LINE_STRING] = styles[GeometryType.LINE_STRING];

 styles[GeometryType.CIRCLE] = styles[GeometryType.POLYGON].concat(
   styles[GeometryType.LINE_STRING]
 );

 styles[GeometryType.POINT] = [
   new Style({
     image: new Circle({
       radius: width * 2,
       fill: new Fill({
         color: blue,
       }),
       stroke: new Stroke({
         color: white,
         width: width / 2,
       }),
     }),
     zIndex: Infinity,
   }),
 ];
 styles[GeometryType.MULTI_POINT] = styles[GeometryType.POINT];

 styles[GeometryType.GEOMETRY_COLLECTION] = styles[
   GeometryType.POLYGON
 ].concat(styles[GeometryType.LINE_STRING], styles[GeometryType.POINT]);</code></pre></div>
    
    </div>
</header>

<article>
    <div class="container-overview">
    

    
        <dl>
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="Style">
        </div>
        <h4 class="name">
            new Style<span class="signature">(<span class="optional">opt_options</span>)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L153">line 153</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>options</code></td>
            
            
            

            <td colspan=2 class="description last">
                
                <p>Style options.</p>
                

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>geometry</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">string</span>
|

<span class="param-type"><a href="module-ol_geom_Geometry-Geometry.html">module:ol/geom/Geometry~Geometry</a></span>
|

<span class="param-type"><a href="module-ol_style_Style.html#~GeometryFunction">module:ol/style/Style~GeometryFunction</a></span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Feature property or geometry
or function returning a geometry to render for this style.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>fill</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_style_Fill-Fill.html">module:ol/style/Fill~Fill</a></span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Fill style.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>image</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_style_Image-ImageStyle.html">module:ol/style/Image~ImageStyle</a></span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Image style.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>renderer</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_style_Style.html#~RenderFunction">module:ol/style/Style~RenderFunction</a></span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Custom renderer. When configured, <code>fill</code>, <code>stroke</code> and <code>image</code> will be
ignored, and the provided function will be called with each render frame for each geometry.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>hitDetectionRenderer</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_style_Style.html#~RenderFunction">module:ol/style/Style~RenderFunction</a></span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Custom renderer for hit detection. If provided will be used
in hit detection rendering.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>stroke</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_style_Stroke-Stroke.html">module:ol/style/Stroke~Stroke</a></span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Stroke style.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>text</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_style_Text-Text.html">module:ol/style/Text~Text</a></span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Text style.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>zIndex</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Z index.</p></td>
        </tr>
	
	
	</tbody>
</table>
            </td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        </dl>
    
    </div>

    

    

    

    

    

    

    

    

    
        <h3 class="subsection-title">Methods</h3>

        <dl>
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="clone">
        </div>
        <h4 class="name">
            clone<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{<a href="module-ol_style_Style-Style.html">module:ol/style/Style~Style</a>}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L227">line 227</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Clones the style.</p>
    </div>
    

    

    

    
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
The cloned style.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getFill">
        </div>
        <h4 class="name">
            getFill<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{<a href="module-ol_style_Fill-Fill.html">module:ol/style/Fill~Fill</a>}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L311">line 311</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Get the fill style.</p>
    </div>
    

    

    

    
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
Fill style.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getGeometry">
        </div>
        <h4 class="name">
            getGeometry<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{string|<a href="module-ol_geom_Geometry-Geometry.html">module:ol/geom/Geometry~Geometry</a>|<a href="module-ol_style_Style.html#~GeometryFunction">module:ol/style/Style~GeometryFunction</a>}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L292">line 292</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Get the geometry to be rendered.</p>
    </div>
    

    

    

    
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
Feature property or geometry or function that returns the geometry that will
be rendered with this style.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getGeometryFunction">
        </div>
        <h4 class="name">
            getGeometryFunction<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{<a href="module-ol_style_Style.html#~GeometryFunction">module:ol/style/Style~GeometryFunction</a>}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L302">line 302</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Get the function used to generate a geometry for rendering.</p>
    </div>
    

    

    

    
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
Function that is called with a feature
and returns the geometry to render instead of the feature's geometry.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getHitDetectionRenderer">
        </div>
        <h4 class="name">
            getHitDetectionRenderer<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{<a href="module-ol_style_Style.html#~RenderFunction">module:ol/style/Style~RenderFunction</a>|null}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L281">line 281</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Get the custom renderer function that was configured with
<code>#setHitDetectionRenderer</code> or the <code>hitDetectionRenderer</code> constructor option.</p>
    </div>
    

    

    

    
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
Custom renderer function.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getImage">
        </div>
        <h4 class="name">
            getImage<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{<a href="module-ol_style_Image-ImageStyle.html">module:ol/style/Image~ImageStyle</a>}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L329">line 329</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Get the image style.</p>
    </div>
    

    

    

    
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
Image style.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getRenderer">
        </div>
        <h4 class="name">
            getRenderer<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{<a href="module-ol_style_Style.html#~RenderFunction">module:ol/style/Style~RenderFunction</a>|null}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L251">line 251</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Get the custom renderer function that was configured with
<code>#setRenderer</code> or the <code>renderer</code> constructor option.</p>
    </div>
    

    

    

    
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
Custom renderer function.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getStroke">
        </div>
        <h4 class="name">
            getStroke<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{<a href="module-ol_style_Stroke-Stroke.html">module:ol/style/Stroke~Stroke</a>}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L347">line 347</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Get the stroke style.</p>
    </div>
    

    

    

    
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
Stroke style.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getText">
        </div>
        <h4 class="name">
            getText<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{<a href="module-ol_style_Text-Text.html">module:ol/style/Text~Text</a>}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L365">line 365</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Get the text style.</p>
    </div>
    

    

    

    
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
Text style.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getZIndex">
        </div>
        <h4 class="name">
            getZIndex<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{number|undefined}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L383">line 383</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Get the z-index for the style.</p>
    </div>
    

    

    

    
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
ZIndex.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="setFill">
        </div>
        <h4 class="name">
            setFill<span class="signature">(fill)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L320">line 320</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Set the fill style.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>fill</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_style_Fill-Fill.html">module:ol/style/Fill~Fill</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Fill style.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="setGeometry">
        </div>
        <h4 class="name">
            setGeometry<span class="signature">(geometry)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L395">line 395</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Set a geometry that is rendered instead of the feature's geometry.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>geometry</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">string</span>
|

<span class="param-type"><a href="module-ol_geom_Geometry-Geometry.html">module:ol/geom/Geometry~Geometry</a></span>
|

<span class="param-type"><a href="module-ol_style_Style.html#~GeometryFunction">module:ol/style/Style~GeometryFunction</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Feature property or geometry or function returning a geometry to render
    for this style.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="setHitDetectionRenderer">
        </div>
        <h4 class="name">
            setHitDetectionRenderer<span class="signature">(renderer)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L271">line 271</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Sets a custom renderer function for this style used
in hit detection.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>renderer</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_style_Style.html#~RenderFunction">module:ol/style/Style~RenderFunction</a></span>
|

<span class="param-type">null</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Custom renderer function.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="setImage">
        </div>
        <h4 class="name">
            setImage<span class="signature">(image)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L338">line 338</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Set the image style.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>image</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_style_Image-ImageStyle.html">module:ol/style/Image~ImageStyle</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Image style.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="setRenderer">
        </div>
        <h4 class="name">
            setRenderer<span class="signature">(renderer)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L261">line 261</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Sets a custom renderer function for this style. When set, <code>fill</code>, <code>stroke</code>
and <code>image</code> options of the style will be ignored.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>renderer</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_style_Style.html#~RenderFunction">module:ol/style/Style~RenderFunction</a></span>
|

<span class="param-type">null</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Custom renderer function.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="setStroke">
        </div>
        <h4 class="name">
            setStroke<span class="signature">(stroke)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L356">line 356</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Set the stroke style.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>stroke</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_style_Stroke-Stroke.html">module:ol/style/Stroke~Stroke</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Stroke style.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="setText">
        </div>
        <h4 class="name">
            setText<span class="signature">(text)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L374">line 374</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Set the text style.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>text</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_style_Text-Text.html">module:ol/style/Text~Text</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Text style.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="setZIndex">
        </div>
        <h4 class="name">
            setZIndex<span class="signature">(zIndex)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js">style/Style.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/style/Style.js#L420">line 420</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Set the z-index.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>zIndex</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>
|

<span class="param-type">undefined</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>ZIndex.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        </dl>
    

    

    
</article>

</section>




        </div>
      </div>
      <script>prettyPrint();</script>
      <script src="scripts/linenumber.js"></script>
      <script src="scripts/main.js"></script>
    </div>
  </body>
</html>